<!--
 * @Author: Aaron Huang
 * @Date: 2021-11-27 19:31:02
 * @LastEditors: Aaron Huang
 * @LastEditTime: 2021-11-28 18:26:30
 * @Description: file content
 * @company: 沃尔玛
-->
<template>
  <el-dialog
    top="10vh"
    :close-on-press-escape="false"
    :visible.sync="dialogVisible"
    title="选择建品标准"
    width="1000px"
    :before-close="handleClose"
  >
    <el-form ref="formRef" :model="formDate" size="mini">
      <el-table :data="formDate.data" border style="width: 100%">
        <el-table-column prop="createByVendorNbr" label="供应商号" align="center" show-overflow-tooltip />
        <el-table-column prop="createByVendorName" label="供应商名称" align="center" width="100px" show-overflow-tooltip />
        <el-table-column prop="sku" label="UPC(不含检验码)" align="center" width="130px" show-overflow-tooltip />
        <!-- <el-table-column prop="itemTypeCode" label="商品类型" align="center" show-overflow-tooltip /> -->
        <el-table-column prop="skuName" label="商品名称" align="center" show-overflow-tooltip />
        <el-table-column label="建品标准" align="center" width="120px">
          <template v-slot:header>
            建品标准
            <el-tooltip placement="top" effect="light">
              <div slot="content">
                简单建品：指紧急情况下的建品类型，只展示商品主图，无需详情页。<br>
                标准建品：指正常情况下的建品类型，完整展示商品主图+详情页
              </div>
              <i class="el-icon-question" />
            </el-tooltip>
          </template>
          <template v-slot="scope">
            <el-form-item :prop="'data.' + scope.$index + '.buildStandard'" :rules="[{ required: true,trigger: 'blur',message:'建品标准不能为空' }]">
              <el-select
                v-model="formDate.data[scope.$index].buildStandard"
                :class="formDate.data[scope.$index].buildStandard == 1?'sign':''"
                placeholder="请选择"
                clearable
                @change="val=>standardChange(val,scope.row)"
              >
                <el-option
                  v-for="item in constructionStandard"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="建品供应商号(9D)" align="center" width="150px">
          <template v-slot="scope">
            <el-form-item :prop="'data.' + scope.$index + '.buildVendorNbr'" :rules="{validator:validator, trigger: 'blur'}">
              <el-input
                v-model.trim="formDate.data[scope.$index].buildVendorNbr"
                :disabled="formDate.data[scope.$index].buildStandard === 1 || formDate.data[scope.$index].directImportFlag == 1"
                placeholder="请输入"
                clearable
                maxlength="9"
                @input="_=>buildVendorNbrChane(_,scope.$index)"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="140px">
          <template v-slot="scope">
            <el-button type="text" size="mini" @click="oneClick(scope.row)">一键填充到未填项</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="handleClose">取 消</el-button>
      <el-button type="primary" size="mini" :loading="savaStandardLoading" @click="savaStandard">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { constructionStandard } from '@/views/coi/commonJs/dictionary'
import { chooseStandard } from '@/api/coi/onlineTaskAPI/sku'

export default {
  name: 'TaskStandard',
  props: {
    formDate: {
      type: Object,
      default: () => {
        return {
          data: [{}]
        }
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      constructionStandard,
      savaStandardLoading: false,
      validator: (rule, value, callback) => {
        if (!value) callback(new Error('建品供应商号不能为空'))
        else if (value.length !== 9) callback(new Error('请输入9位供应商号'))
        else callback()
      }
    }
  },
  methods: {
    handleClose() {
      this.$refs.formRef.resetFields()
      this.dialogVisible = false
    },
    standardChange(val, row) {
      const deptNbr = ('0' + row.deptNbr).slice(-2)
      if (val === 1 || row.directImportFlag) row.buildVendorNbr = `382575${deptNbr}0`
      else row.buildVendorNbr = ''
    },
    buildVendorNbrChane(e, index) {
      this.formDate.data[index].buildVendorNbr = (e.match(/^\d*/g)[0]) || null
    },
    oneClick(row) {
      const buildStandard = row.buildStandard
      const buildVendorNbr = row.buildVendorNbr
      this.formDate.data.forEach(item => {
        if (typeof item.buildStandard !== 'number') this.$set(item, 'buildStandard', buildStandard)
        if (!item.buildVendorNbr) this.$set(item, 'buildVendorNbr', buildVendorNbr)
      })
    },
    savaStandard() {
      try {
        this.$refs.formRef.validate(async function(val) {
          if (val) {
            this.savaStandardLoading = true
            const params = this.formDate.data.map(item => {
              return {
                id: item.id,
                buildStandard: item.buildStandard,
                buildVendorNbr9: item.buildVendorNbr
              }
            })
            const { result } = await chooseStandard(params)
            if (result) {
              this.$message({
                type: 'success',
                message: result
              })
              this.handleClose()
              this.$emit('savaSuccess')
            }
          }
        }.bind(this))
      } finally {
        this.savaStandardLoading = false
      }
    }
  }

}
</script>

<style lang="scss" scoped>
// /deep/ .el-form-item{
//   margin: 0;
// }
.sign{
  /deep/ input {
    color: #f56c6c;
  }
}
/deep/ .el-icon-question{
  cursor: pointer;
}
</style>
